<template>
  <div class="containers">
    <el-radio-group @change="changeDate(value)" v-model="value" size="small">
      <el-radio-button
        v-for="(item, index) in timeArr"
        :key="index"
        :label="item.value"
        >{{ item.label }}</el-radio-button
      >
    </el-radio-group>
    <el-date-picker
      size="small"
      :picker-options="pickerOptions"
      :clearable="false"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      v-model="dateArr"
      @change="changeValue"
      style="width: 240px"
      type="daterange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    ></el-date-picker>
  </div>
</template>
<script>
export default {
  props: {
    timeArr: {
      // radiobutton选项配置30天及以上自由配置
      type: Array,
      default: () => {
        return [];
      },
    },
    dayActive: {
      // 默认选项
      type: [String, Number],
      default: "7",
    },
    today: {
      // 默认包含今天
      type: Boolean,
      default: true,
    },
    dayLimit: {
      // 能查最近天数 从今天开始往历史事件算
      type: [String, Number],
      default: "180",
    },
  },
  data() {
    return {
      // 配合dayLimit使用的，配置只能选择的天数
      pickerOptions: {
        disabledDate: (time) => {
          // 小于今天 最多180天(需要今天 与不需要今天)
          let todayStart = this.$dayjs().format("YYYY-MM-DD 00:00:00");
          // let yesterdayStart = this.$dayjs().subtract(1,"day").format("YYYY-MM-DD 00:00:00")
          let yesterdayEnd = this.$dayjs()
            .subtract(1, "day")
            .format("YYYY-MM-DD 23:59:59");
          let todayEnd = this.$dayjs().format("YYYY-MM-DD 23:59:59");
          if (this.today) {
            //包含今天
            return (
              time.getTime() > new Date(todayEnd).getTime() ||
              time.getTime() <
                new Date(todayStart).getTime() - 8.64e7 * this.dayLimit
            );
          } else {
            //不包含今天[统一前挪一天]
            return (
              time.getTime() > new Date(yesterdayEnd).getTime() ||
              time.getTime() <
                new Date(todayStart).getTime() - 8.64e7 * this.dayLimit
            );
          }
        },
      },
      value: "",
      dateArr: [],
    };
  },
  created() {
    this.changeDate(this.dayActive); // 初始化
  },
  methods: {
    // 时间格式转换
    dateFormat(date) {
      date = new Date(date);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate() + "";
      return Y + M + D;
    },
    // 昨天 最近7天 最近30天选择
    changeDate(label) {
      this.value = label;
      const end = new Date();
      const start = new Date();
      let newStart = "";
      let newEnd = "";
      if (label == 1) {
        // 今日1
        newStart = this.dateFormat(
          start.setTime(start.getTime() - 86400000 * label + 86400000)
        );
        newEnd = this.dateFormat(end.setTime(end.getTime()));
      } else if (label == 2) {
        // 昨天2
        newStart = this.dateFormat("2024-01-01");
        newEnd = this.dateFormat(end.setTime(end.getTime() - 86400000));
      } else {
        // 处理7天 30天 或者更多
        if (this.today) {
          // 包含今天
          newStart = this.dateFormat(
            start.setTime(start.getTime() - 86400000 * label + 86400000)
          );
          newEnd = this.dateFormat(end.setTime(end.getTime()));
        } else {
          newStart = this.dateFormat(
            start.setTime(start.getTime() - 86400000 * label)
          );
          newEnd = this.dateFormat(end.setTime(end.getTime() - 8.64e7));
        }
      }
      // console.log("日期11",newStart ,newEnd)
      this.dateArr = [newStart, newEnd];
      this.$emit("changDay", label);
      this.$emit("getDateArr", this.dateArr);
    },
    // 选择时间
    changeValue() {
      this.$emit("changDay", "");
      this.$emit("getDateArr", this.dateArr);
      this.$nextTick(() => {
        this.value = this.dayActive;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.containers {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .el-radio-group {
    margin-right: 10px;
  }
}
</style>
